<template>
  <div class="customDropSelect">
    <div class="inputBox">
      <van-field v-model="selectText" label="" placeholder="请选择" input-align="left" disabled @click="openSelectPicker" />
      <i class="iconfont down">&#xe656;</i>
    </div>
    <van-popup v-model="selectShow" position="bottom">
      <van-picker :title="pickerTitle" show-toolbar :default-index="selectIndex" :columns="selectColumns" :value-key="valueKey" @cancel="selectShow = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    selectValue: {
      type: [String, Number],
      default: ''
    },
    pickerTitle: {
      type: String,
      default: '标题'
    },
    selectColumns: {
      type: Array,
      default: () => [
        {
          text: '安全报警',
          value: '安全报警'
        },
        {
          text: '环保报警',
          value: '环保报警'
        },
        {
          text: '消防报警',
          value: '消防报警'
        },
        {
          text: '能源报警',
          value: '能源报警'
        }
      ]
    },
    valueKey: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      selectText: '',
      selectShow: false,
      selectIndex: ''
    }
  },
  watch: {
    selectValue(nv) {
      this.initPicker()
    }
  },
  mounted() {
    this.initPicker()
  },
  methods: {
    initPicker() {
      this.selectColumns.forEach((v, vi) => {
        if (typeof v === 'object') {
          if (v.value === this.selectValue) {
            this.selectIndex = vi
            this.selectText = v.text
          }
        } else {
          if (v === this.selectValue) {
            this.selectIndex = vi
            this.selectText = v
          }
        }
      })
    },
    openSelectPicker() {
      this.selectShow = true
    },
    onConfirm(value, index) {
      const backV = typeof value === 'object' ? value.value : value
      const backT = typeof value === 'object' ? value.text : value
      this.selectText = backT
      this.$emit('update:selectValue', backV)
      this.$emit('change', backV)
      this.selectShow = false
    }
  }
}
</script>

<style lang="scss">
.customDropSelect {
  background: #fff;
  max-width: 300px;
  .inputBox {
    display: flex;
    align-items: center;
    .iconfont {
      color: #838282;
      margin-right: 15px;
    }
    .van-cell {
      padding: 5px 10px;
      &:active {
        background-color: rgba(0, 0, 0, 0);
      }
      .van-field__control {
        height: 25px;
        font-size: 12px;
        text-align: right;
        &:disabled {
          color: #323233;
          -webkit-text-fill-color: #323233;
        }
      }
      &::after {
        display: none;
      }
    }
  }
}
</style>
